Ext.define("Module.ldjscharts.MonthCharts",{
	extend : 'Ext.panel.Panel',
	border: false,
	layout:'column',
	initComponent : function() {
		var me = this;
		
		me.defaults = {padding:5};
		var synVideo_month = Ext.create("Ext.panel.Panel",{
			title:'本月视频同步数量',
			height:300,layout:'fit',
			columnWidth:1/3,
			items:[{
				xtype:'chart',
				height: 250,
				animate: true,
				store:  Ext.create('Ext.data.Store', {
					fields: ['counts', 'days'],
					autoLoad: true,
					proxy: {
						type: 'ajax',
						url: 'sjfx/LeadDrivingAction/videoSyn_month.do',
						reader: {
							type: 'json',
						}
					}
				}),
				legend: {
					position: 'right'
				},
				axes: [{
					type: 'Numeric',
					position: 'left',
					/*label: {
						renderer: Ext.util.Format.numberRenderer('0,0')
					},*/
					title: '数量',
					fields:['counts'],
					grid: true,
					majorTickSteps: 4,
					minimum: 0
				},
				{
					type: 'Category',
					position: 'bottom',
					fields: ['days'],
					grid: true,
					label: {
						renderer: function(v) {
							return String(v);
						}
					},
					title: false
				}],
				series: [{
					type: 'line',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'left',
					xField: 'days',
					yField: 'counts',
					tips: {
						trackMouse: true,
						width: 100,
						height: 30,
						renderer: function(storeItem, item) {
							this.setTitle('数量: '+storeItem.get('counts'));
						}
					},
					markerConfig: {
						type: 'cross',
						size: 4,
						radius: 4,
						'stroke-width': 0
					}
				}]
			}]
		});
		
		
		var wg_month = Ext.create("Ext.panel.Panel",{
			title:'本月视频违规数量及违规率',
			height:300,layout:'fit',
			columnWidth:1/3,
			items:[{
				xtype:'chart',
				height: 250,
				animate: true,
				store:  Ext.create('Ext.data.Store', {
					fields: ['counts', 'days','lv'],
					autoLoad: true,
					proxy: {
						type: 'ajax',
						url: 'sjfx/LeadDrivingAction/videoWd_month.do'
					}
				}),
				legend: {
					position: 'right'
				},
				axes: [{
					type: 'Numeric',
					position: 'left',
					/*label: {
						renderer: Ext.util.Format.numberRenderer('0,0')
					},*/
					title: '数量',
					fields:['counts'],
					grid: true,
					majorTickSteps: 4,
					minimum: 0
				},
				{
					type: 'Category',
					position: 'bottom',
					fields: ['days'],
					grid: true,
					label: {
						renderer: function(v) {
							return String(v);
						}
					},
					title: false
				},{
					type: 'Numeric',
					position: 'right',
					fields: ['lv'],
					title: '违规率（%）',
					label: {
						renderer: Ext.util.Format.numberRenderer('00')
					},
					minimum: 0,
					maximum: 100
				}],
				series: [{
					type: 'column',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'left',
					xField: 'counts',
					yField: ['counts'],
					tips: {
						trackMouse: true,
						width: 100,
						height: 30,
						renderer: function(storeItem, item) {
							this.setTitle('数量: '+storeItem.get('counts'));
						}
					},
					markerConfig: {
						type: 'cross',
						size: 4,
						radius: 4,
						'stroke-width': 0
					}
				},
				{
					type: 'line',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'right',
					xField: 'days',
					yField: ['lv'],
					tips: {
						trackMouse: true,
						width: 100,
						height: 30,
						renderer: function(storeItem, item) {
							this.setTitle('违规率: '+storeItem.get('lv')+'%');
						}
					},
					markerConfig: {
						type: 'cross',
						size: 4,
						radius: 4,
						'stroke-width': 0
					}
				}]
			}]
		});

		var storeVideoMatch_months = Ext.create('Ext.data.Store',{
			autoLoad: true,
			fields: ['counts','days'],
			proxy: {
				type: 'ajax',
				url: 'sjfx/LeadDrivingAction/videoManager_month.do'
			}
		});
		var videoMatch_months = Ext.create("Ext.panel.Panel",{
			title:'本月视频关联量',
			height:300,
			layout:'fit',
			columnWidth:1/3,
			items:[{
				xtype:'chart',
				height: 250,
				animate: true,
				store: storeVideoMatch_months,
				axes:[{
					type: 'Numeric',
					position: 'left',
//					label: {
//						renderer: Ext.util.Format.numberRenderer('0,0')
//					},
					title: '数量',
					//fields:['counts'],
					grid: true,
					minimum: 0, 
					majorTickSteps: 4
				},
				{
					type: 'Category',
					position: 'bottom',
					fields: ['days'],
					grid: true,
					label: {
						renderer: function(v) {
							return String(v);
						}
					},
					title: false
				}],
				series: [{
					type: 'column',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'left',
					xField: 'days',
					yField: 'counts',
					tips: {
						trackMouse: true,
						width: 100,
						height: 30,
						renderer: function(storeItem, item) {
							this.setTitle('数量: '+storeItem.get('counts'));
						}
					},
					markerConfig: {
						type: 'cross',
						size: 4,
						radius: 4,
						'stroke-width': 0
					}
				}]

			}]
		});
		
		me.items = [synVideo_month,wg_month,videoMatch_months];
		me.callParent();
	}
});